<html>
<title>color</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
	<style type="text/css">
	body
	{
	    display:flex;
	    align-items:center;
	    justify-content:center;
	    -moz-justify-content:center;
	    -moz-align-items:center;	    
	    -ms-justify-content:center;
	    -ms-align-items:center;
	    -webkit-justify-content:center;
	    -webkit-align-items:center;
	    background-color:#ccc;
	}
	canvas
	{
		background-color:#eee;
		border-radius:10px;
		cursor:pointer;
	}
	.warehouse
	{
		display:none;
	}
	.buttom
	{
		width:220px;
		height:70px;
		border-radius:35px;
		background-color:#00cc47;
		position:absolute;
		bottom:20px;
		left:50%;
		transform:translate(-50%,0px);
		cursor:pointer;
		transition:all 0.5s;
	}
	.buttom:hover
	{
		background-color:#009a36;
	}
	.re
	{
		position:absolute;
		left:50%;
		top:50%;
		transform:translate(-50%,-50%);
		line-height:40px;
		text-align:center;
		font-size:40px;
		color:#fff;
		width:40px;
		height:40px;
		transition:all 0.5s;
		font-family:等线,微软雅黑;
	}
	.re:hover
	{
		transform:translate(-50%,-50%) rotate(180deg);
	}
	</style>
</head>
<body>
	<canvas id="can" width="1280" height="720" onclick="cl()">
	</canvas>
	<img id="add" src="add.png" style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:80px;height:80px;cursor:pointer;" onclick="cl()">
	<div class="warehouse">
		<img src="" id="image">
		<input id="upimg" type="file" multiple accept="image/*" onchange="upload(this)"> 
	</div>
	<div class="buttom" id="buttom" onclick="color()"><div class="re">↻</div></div>
</body>
<script type="text/javascript">
	function cl()
	{
		return document.getElementById('upimg').click();
	}

	function upload(obj)
	{
		var file=obj.files[0];
        var reader=new FileReader();
        reader.readAsDataURL(file);                    
        reader.onload=function(e)
        {
            var newimg=this.result;
            var img=document.getElementById("image");
			img.src=newimg;
			var canvas=document.getElementById("can");
			var c=canvas.getContext("2d");
			c.drawImage(img,0,0,1280,720);
			var imgData=c.getImageData(0,0,1280,720);
			var l=imgData.data.length;
			window.temp=new Array(l);
			for (var i=0;i<l;i+=1)
			{
			    temp[i]=imgData.data[i];
			}
			document.getElementById("add").style.display="none";
			color();       
        };    	
	}

	function color()
	{
		var canvas=document.getElementById("can");
		var c=canvas.getContext("2d");
		var imgData=c.getImageData(0,0,1280,720);;
		var l=imgData.data.length;
		var transform=new Array(256);
		for (var x=0;x<256;x++)
		{
			transform[x]=Math.floor(Math.random()*256);
		}
		for (var i=0;i<l;i+=4)
		{
		    var R=parseInt(temp[i]/30)*30;
		    var G=parseInt(temp[i+1]/30)*30; 
		    var B=parseInt(temp[i+2]/30)*30;
		    imgData.data[i]=transform[R];
		    imgData.data[i+1]=transform[G];
		    imgData.data[i+2]=transform[B];
		}
		c.putImageData(imgData,0,0);
	}
</script>
</html>